<!--
/**
* Author: txj
* Date:2023年10月20日17:31:51
* Desc: 会员卡充值
*/
-->
<template>
  <yy-page>
    <!-- #ifdef MP-WEIXIN || MP-ALIPAY-->
    <yy-navbar :border="false" title="会员卡充值" left-icon-color="#fff" title-color="#fff" :auto-back="true"></yy-navbar>
    <!-- #endif-->
    <view class="header">
      <card-item one-item :card="card" :show-recharge-text="true"> </card-item>
    </view>
    <u-grid :column="3">
      <u-grid-item v-for="(item, index) in list" :key="index">
        <view @click="recharge(item)" class="money-item" hover-class="money-hover-class" hover-start-time="0" hover-stay-time="0">{{ item.amount }}</view>
      </u-grid-item>
    </u-grid>
  </yy-page>
</template>

<script>
  import CardItem from './components/cardItem.vue'
  export default {
    // 挂载组件
    components: { CardItem },

    // 数据
    data() {
      return {
        list: [],
        card: {}
      }
    },
    onLoad(options) {
      const query = this.$utils.decode(options.query)
      this.card = query
      console.log('this.card', this.card)
      uni.$api.memberCard.getRechargeSet().then((res) => {
        this.list = res.setList
      })
    },
    // 计算属性
    computed: {},

    // 挂载完成
    mounted() {},

    // 创建完成
    created() {},

    // 挂载方法
    methods: {
      recharge(item) {
        const query = {
          id: this.card.id,
          money: item.amount,
          cinemaId: this.$auth.getLocCinemaInfo().cinemaId
        }
        uni.$api.memberCard.createOrder(query).then((res) => {
          console.log('res', res)
          const query = {
            cardOrderId: res.orderId,
            orderType: 'card',
            needPay: item.amount
          }
          this.$tools.navigateTo('/pagesOrder/pay/index', query)
        })
        // this.$tools.navigateTo('/pagesOrder/card/rechargeSuccess')
      }
    }
  }
</script>
<style lang="scss" scoped>
  .header {
    margin-bottom: 40rpx;
    position: relative;
    box-sizing: border-box;
    height: 300rpx;
    width: 100%;
    background: linear-gradient(to bottom, #48cbe9, #f3f5f7);
    /* #ifdef H5 */
    padding-top: 50rpx;
    height: 350rpx;
    /* #endif*/
  }
  .main {
    margin-top: 20rpx;
  }
  .money-item {
    border: 1rpx solid #dfdfdf;
    height: 112rpx;
    border-radius: 20rpx;
    margin: 20rpx 20rpx 0 20rpx;
    box-sizing: border-box;
    width: calc(100% - 40rpx);
    line-height: 112rpx;
    font-size: 34rpx;
    font-weight: bold;
    text-align: center;
  }
  .money-hover-class {
    background: linear-gradient(135deg, #58c5ff 0%, #0fe8dd 100%);
    border-radius: 20rpx;
    color: white;
  }
  .recharge-text {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: #fdf4e3;
    color: #ff8042;
    font-size: 22rpx;
    text-align: center;
    line-height: 60rpx;
  }
</style>
